<!--
 * @Author: maly
 * @Date: 2022-01-17 17:00:14
 * @LastEditTime: 2022-05-26 11:14:28
 * @LastEditors: 高稀 562949576@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \code\ctp-static-portal-front\src\components\weather\index.vue
-->
<template>
    <div :style="containerStyle" class="container">
        <div id="weather" :style="weatherAreaStyle">
            <div class="weather-icon">
                <i :class="weatherIcon" :style="{ color: iconColor }" class="vportal"></i>
            </div>
            <div :style="{ color: fontColor }" class="weather-text">
                <b class="temperature">{{ temperature }}</b>
                <p
                    ><span class="defalt-span">{{ weatherData.city }} </span>
                    <span>{{ weatherData.weather }}</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Weather',
        props: {
            sectionData: {
                type: Object,
            },
            contentWidth: { type: Number },
        },
        data() {
            return {
                // 数据格式
                // weatherData:{
                // 	adcode: "510100"
                // 	city: "成都市"
                // 	humidity: "83"
                // 	info: "OK"
                // 	province: "四川"
                // 	reportTime: "2022-01-27 14:03:30"
                // 	temperature: 7
                // 	weather: "阴"
                // 	windDirection: "北"
                // 	windPower: "≤3"
                // }
                weatherData: {},
            };
        },
        computed: {
            containerStyle() {
                return {
                    height: this.sectionData.options.height
                        ? this.sectionData.options.height + 'px'
                        : '97px',
                    lineHeight: this.sectionData.options.height
                        ? this.sectionData.options.height + 'px'
                        : '97px',
                    backgroundColor: this.sectionData.options.backgroundColor,
                };
            },
            weatherAreaStyle() {
                let bgi = '';
                if (this.sectionData.options.bgPicture == '1') {
                    bgi = require('../../assets/weather/weatherBg1.jpg');
                    //  bgi='assets/weather/weatherBg1.jpg'
                } else if (this.sectionData.options.bgPicture == '2') {
                    bgi = require('../../assets/weather/weatherBg2.jpg');
                    // bgi = 'assets/weather/weatherBg2.jpg'
                } else {
                }
                return {
                    backgroundImage: `url(${bgi})`,
                };
            },
            bgc() {
                return this.sectionData && this.sectionData.options
                    ? this.sectionData.options.backgroundColor
                    : 'transparent';
            },
            iconColor() {
                return this.sectionData.options.iconColor
                    ? this.sectionData.options.iconColor
                    : 'rgb(36,144,248)';
            },
            fontColor() {
                return this.sectionData.options.wordsColor
                    ? this.sectionData.options.wordsColor
                    : 'rgb(153,153,153)';
            },
            temperature() {
                return this.weatherData.temperature + '℃';
            },
            weatherIcon() {
                //let weatheIcon=this.weatherData.weather;
                let weatherIcon = this.weatherData.weather || '';
                if (weatherIcon.indexOf('晴') !== -1) {
                    return 'vp-icon-clear-day';
                } else if (weatherIcon.indexOf('雨') !== -1) {
                    return 'vp-icon-rain_level_01';
                } else if (weatherIcon.indexOf('雪') !== -1) {
                    return 'vp-icon-snow_level_03';
                } else if (weatherIcon.indexOf('沙') !== -1) {
                    return 'vp-icon-blowingSand';
                } else if (weatherIcon.indexOf('浮尘') !== -1) {
                    return 'vp-icon-flyAsh';
                } else if (weatherIcon.indexOf('霾') !== -1) {
                    return 'vp-icon-haze';
                } else if (weatherIcon.indexOf('阴') !== -1) {
                    return 'vp-icon-cloudy';
                } else {
                    return 'vp-weather';
                }
            },
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                //let _this=this;
                AMap.plugin('AMap.CitySearch', () => {
                    let citySearch = new AMap.CitySearch();
                    citySearch.getLocalCity((status, result) => {
                        if (status === 'complete' && result.info === 'OK') {
                            // 查询成功，result即为当前所在城市信息
                            let cityName = result.city;
                            AMap.plugin('AMap.Weather', () => {
                                //创建天气查询实例
                                let weather = new AMap.Weather();

                                //执行实时天气信息查询
                                weather.getLive(cityName, (err, data) => {
                                    // console.log('---------------------');
                                    // console.log(err, data);
                                    //得到数据
                                    this.weatherData = data;
                                    // console.log('---------------------');
                                });
                            });
                        }
                    });
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        // height: 97px;
        // line-height: 97px;
        #weather {
            height: 100%;
            overflow: hidden;
            color: #fff;
            text-align: center;
            background-position: center center;
            background-repeat: no-repeat;
            border-radius: inherit;
            //line-height: 97px;

            .weather-icon {
                display: inline-block;
                width: 40px;
                height: 40px;
                font-size: 40px;
                line-height: 40px;
                vertical-align: middle;

                i {
                    width: 100%;
                    height: 100%;
                }
            }

            .weather-text {
                display: inline-block;
                padding-left: 4px;
                font-size: 12px;
                line-height: 16px;
                text-align: left;
                vertical-align: middle;

                b {
                    font-size: 18px;
                    font-weight: normal;
                    line-height: 18px;
                }

                p {
                    margin: 0;
                    font-size: 12px;
                    line-height: 18px;

                    .defalt-span {
                        cursor: pointer;

                        &:hover {
                            color: #2490f8;
                        }
                    }
                }

                .temperature {
                    font-size: 18px;
                    font-weight: 400;
                    line-height: 18px;
                }
            }
        }
    }
</style>
